<template>
	<view>
		<view class="titleBox" v-if="carList.length > 0">
			<view class="left">
				<text class="title">为您推荐</text>
				<!-- <text class="type">送车上门</text> -->
			</view>
			<view class="right" @click.stop="goCar">
				<text>更多车型</text>
				<u-icon name="arrow-right" color="#474B4E" size="10"></u-icon>
			</view>
		</view>

		<view class="guidCarList" v-if="carList.length > 0">
			<view class="carItem" v-for="(item, index) in carList" :key="item.planId" @click.stop="goConfimOrder(item)">
				<image class="carImage" :src="item.url|mmvImageUrl" mode="widthFix"></image>
				<view class="carInfo">{{item.modelInfo|filterNull}}</view>
				<view class="carConfig">
					<!-- {{item.operatingClassification||''}}·{{item.speedChangingBox||''}}·{{item.seating||''}} -->
					{{getCarConfig(item)}}
				</view>
				<view class="price">¥{{item.averagePrice}}</view>
			</view>
		</view>

		<u-modal title="提示" content="您的账号暂未认证,是否去认证?" :show="showAuthCerAlert" showCancelButton
			@confirm="confirmAuthCer" @cancel="showAuthCerAlert = false">
		</u-modal>
		<u-modal :show="show" title="提示" :content='alertContent' @confirm="show=false" @close="show=false"
			confirmText="知道了"></u-modal>
	</view>
</template>

<script>
	import {
		homeModel,
		storeInfoList,
		vehicleSelectionVerification
	} from '@/api/home-api.js'
	export default {
		name: 'recommendCar',
		data() {
			return {
				carList: [],
				showAuthCerAlert: false,
				show: false,
				alertContent: '',
			}
		},
		computed: {
			tenantId() {
				return this.$store.state.user.tenantId;
			},
			storeId() {
				return this.$store.state.user.takeStoreId;
			},
			//是否认证下单（1.是 2.否）
			certificationOrder() {
				return this.$store.state.initData.initData.certificationOrder;
			},
			censorStatus() {
				return this.$store.state.user.censorStatus;
			},
			isLogin() {
				return this.$store.state.user.isLogin;
			}
		},
		mounted() {
			uni.$on('changeStore', () => {
				setTimeout(() => {
					this.getHomeCar();
				}, 300)

			})
			uni.$on('changeTime', () => {
				setTimeout(() => {
					this.getHomeCar();
				}, 300)

			})
		},
		methods: {
			getCarConfig(item) {
				let carConfigs = [];
				if (item.operatingClassification) {
					carConfigs.push(item.operatingClassification)
				} else if (item.speedChangingBox) {
					carConfigs.push(item.speedChangingBox)
				} else if (item.seating) {
					carConfigs.push(item.seating)
				}
				return carConfigs.join('·')
			},
			goCar() {
				uni.navigateTo({
					url: '/pagesA/car/car-list'
				})
			},
			getHomeCar() {
				homeModel({
					tenantId: this.tenantId,
					storeId: this.storeId,
					lat: this.$store.state.user.takeCarLat,
					lon: this.$store.state.user.takeCarLng,
					startTime: this.$store.state.order.startTime,
					endTime: this.$store.state.order.endTime,
					bizType: 1
				}).then(res => {
					this.carList = res.data || [];
				})
			},
			//确认下单
			goConfimOrder(item) {
				if (this.isLogin) {
					if (this.certificationOrder == 1) { //需要验证实名
						if (this.censorStatus == 2) { //已认证
							// if (item.carNum > 0) {
									this.vehicleSelectionVerification(item);
							// uni.navigateTo({
							// 	url: '/pagesA/order/confim-order?planId=' + item.planId + '&carUrl=' + item.url +
							// 		'&rentAmount=' + item.modelPresentPrice + '&activityId=' + item.activityId
							// })
							// } else {
							// 	this.$u.toast('抱歉,当前车型无库存,请选择其他车型下单');
							// }
						} else { //未认证->去认证
							this.showAuthCerAlert = true;
						}
					} else { //不需要校验实名
						// if (item.carNum > 0) {
							this.vehicleSelectionVerification(item);
						// uni.navigateTo({
						// 	url: '/pagesA/order/confim-order?planId=' + item.planId + '&carUrl=' + item.url +
						// 		'&rentAmount=' + item.modelPresentPrice + '&activityId=' + item.activityId
						// })
						// } else {
						// 	this.$u.toast('抱歉,当前车型无库存,请选择其他车型下单');
						// }

					}
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}

			},
			vehicleSelectionVerification(item) {
				vehicleSelectionVerification({
					tenantId: this.$store.state.user.tenantId,
					takeStoreId: this.$store.state.user.takeStoreId,
					alsoStoreId: this.$store.state.user.returnStoreId ? this.$store.state.user.returnStoreId : this
						.$store.state.user.takeStoreId,
					startTime: this.$store.state.order.startTime,
					endTime: this.$store.state.order.endTime,
					rentalType: this.$store.state.order.rentalType,
					takeLat: this.$store.state.user.takeCarLat,
					takeLon: this.$store.state.user.takeCarLng,
					alsoLat: this.$store.state.user.returnCarLat,
					alsoLon: this.$store.state.user.returnCarLng,
				}).then(res => {
					if (res.code == 200) {
						// uni.navigateTo({
						// 	url: '/pagesA/car/car-list'
						// })
						uni.navigateTo({
							url: '/pagesA/order/confim-order?planId=' + item.planId + '&carUrl=' + item.url +
								'&rentAmount=' + item.modelPresentPrice + '&activityId=' + item.activityId
						})
					} else if (res.code == 505) {
						this.alertContent = res.msg;
						this.show = true;
					} else {
						this.$store.dispatch('order/getOrderTime');
					}
				}).catch(err => {

				})
			},
			//去认证
			confirmAuthCer() {
				this.showAuthCerAlert = false;
				uni.navigateTo({
					url: '/pages/login/real_name'
				})
			},
		}

	}
</script>

<style lang="scss" scoped>
	.titleBox {
		margin: 30rpx 10rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			display: flex;
			align-items: center;

			.title {
				color: #000;
				font-size: 36rpx;
				font-weight: bold;
			}

			.type {
				margin-left: 10rpx;
				padding: 0 5rpx;
				height: 30rpx;
				line-height: 30rpx;
				text-align: center;
				background: linear-gradient(90deg, #0072FF 0%, #00AFFE 99%);
				border-radius: 4rpx;
				font-size: 22rpx;
				color: #fff;
			}
		}

		.right {
			display: flex;
			align-items: center;
			color: #474B4E;
			font-size: 26rpx;
		}
	}

	.guidCarList {
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.carItem {
			box-sizing: border-box;
			background: #fff;
			border-radius: 14rpx;
			margin-bottom: 20rpx;
			width: 344rpx;
			padding: 30rpx 16rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.carImage {
				align-self: center;
				width: 305rpx;
				height: 153rpx;
			}

			.carInfo {
				margin-top: 30rpx;
				color: #1F2224;
				font-size: 28rpx;
				font-weight: bold;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.carConfig {
				color: #5B6166;
				font-size: 24rpx;
				font-weight: bold;
				margin: 10rpx 0;
			}

			.price {
				color: #FF5020;
				font-size: 30rpx;
				font-weight: bold;

				&::after {
					content: '/天';
					font-size: 24rpx;
					color: #747F88;

				}
			}

		}
	}
</style>